<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>聊天记录</title>
    <script src="/demo/static/layui.js"></script>
    <link rel="stylesheet" href="../dist/css/layui.css">

    <!-- <link rel="stylesheet" href="http://local.res.layui.com/layui/src/css/layui.css"> -->
    <style>
        body .layim-chat-main {
            height: auto;
        }
    </style>
</head>

<body>

    <div class="layim-chat-main">
        <ul id="LAY_view"></ul>
    </div>

    <div id="LAY_page" style="margin: 0 10px;"></div>

    <textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

    <!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->


    <script src="./layui.js"></script>
    <script>
        layui.use(['layim', 'laypage'], function() {
            var layim = layui.layim,
                layer = layui.layer,
                laytpl = layui.laytpl,
                $ = layui.jquery,
                laypage = layui.laypage;

            //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html


            //开始请求聊天记录
            var param = location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据

                //实际使用时，下述的res一般是通过Ajax获得，而此处仅仅只是演示数据格式
                ,
                res = {
                    code: 0,
                    msg: '',
                    data: [{
                        username: '纸飞机',
                        id: 100000,
                        avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg',
                        timestamp: 1480897882000,
                        content: 'face[抱抱] face[心] 你好啊小美女'
                    }, {
                        username: 'Z_子晴',
                        id: 108101,
                        avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg',
                        timestamp: 1480897892000,
                        content: '你没发错吧？face[微笑]'
                    }, {
                        username: 'Z_子晴',
                        id: 108101,
                        avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg',
                        timestamp: 1480897898000,
                        content: '你是谁呀亲。。我爱的是贤心！我爱的是贤心！我爱的是贤心！重要的事情要说三遍~'
                    }, {
                        username: 'Z_子晴',
                        id: 108101,
                        avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg',
                        timestamp: 1480897908000,
                        content: '注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。\n该模版文件所在目录（相对于layui.js）：\n/css/modules/layim/html/chatlog.html'
                    }]
                }

            //console.log(param)
            // 向服务器请求聊天记录 然后通过 laytpl 进行渲染            
            var html = laytpl(LAY_tpl.value).render({
                data: res.data
            });
            $('#LAY_view').html(html);

        });
    </script>
</body>

</html>